<template>
  <div class="app-role">
    <h3>商品分类</h3>
   <Query
     :items="queryColumns"
     :initial-params="queryParams"
     @query="handleQuery"
     labelWidth="100px"
   />
   <Table
     :table-columns="tableColumns"
     :table-loading="tableLoading"
     :table-data="tableData"
     :total="total"
     @pagination="handlePagination"
     :tree-props="{ children: 'children', hasChildren:'hasChildren',icon:'Plus' }"
   >
     <template v-slot:tools>
       <el-button-group>
         <el-button type="primary" @click="handleAdd">添加分类</el-button>
       </el-button-group>
     </template>
     <template #img="{row}">
        <div class="classifyName_box">
          <img v-if="row.img" class="classifyName_img" :src="row.img" />
          <span v-else>-</span>
        </div>
     </template>
     <template #opt="scope">
       <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
       <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
     </template>
   </Table>
   <el-dialog v-model="showDialog" :title="dialogTitle" width="600">
      <el-form ref="refForm" :model="formData" :rules="formRules" size="default">
        <el-form-item label="分类名称" label-width="100px" required>
          <el-input v-model="formData.classifyName" :maxlength="20" show-word-limit placeholder="请输入分类名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分类类型" label-width="100px">
          <el-radio-group v-model="formData.level">
            <el-radio :value="1">主分类</el-radio>
            <el-radio :value="2">子分类</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="父分类" label-width="100px" v-show="formData.level=='2'">
          <!-- placeholder="可多选" multiple :multiple-limit="10" -->
          <el-select clearable v-model="formData.parentId" placeholder="请选择" >
            <el-option v-for="(item,i) in allClassList" :key="'allClassitem_'+i" :label="item.classifyName" :value="item.id" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="分类图片" label-width="100px">
          <ImageUpload
            v-model="formData.img"
            :limit="1"
            listType="picture-card"
          >
          </ImageUpload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false" size="default">取消</el-button>
          <el-button type="primary" @click="handleSubmit" size="default">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="productTemeplate">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import DialogForm from '@/components/FormDialog/index.vue'
import { getClassifytree, saveTemplate,saveClassify } from "@/api/goods";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(true)
const dialogTitle = ref('')
const loading = ref(false)
const showDialog = ref(false)
const refForm = ref(false)
const router = useRouter();
const formRules = ref({
  classifyName: [
   { required: true, message: '请输入分类名称', trigger: 'blur' },
 ],
})
const dialogTableVisible = ref(false)
const prodTypeFormatter = function(row){
  const obj = {
    1: '实物商品',
    2: '虚拟商品',
  }
  return obj[row.prodType]
}
const formData = ref({})
const data = reactive({
 tableColumns: [
   { label: "分类名称", prop: "classifyName",width:300},
   { label: "分类图片", prop: "img",slot: 'img' },
   { label: "系统排序", prop: "sortNum" },
   { label: "创建时间", prop: "gmtCreate" },
   { label: "操作",  prop: "opt", slot: 'opt'},
 ],
 queryColumns: [
  { label: "分类名称", prop: "classifyName", type: 'input', attrs: {placeholder:'请输入'}},
 ],
 pageParams: {
  current: 1,
  size: 10
 },
 queryParams: {},
 formItems: [

 ]
})

const { tableColumns, queryColumns, pageParams, queryParams, formItems } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
  tableLoading.value = true
  const data  = {
     ...queryParams.value,
     ...pageParams.value,
     type:'1',// 1-商品分类
  }
  getClassifytree(data)
  .then(res => {
    let list = res.data.records || []
    list.map(item=>{
      item.children = item.itemList || []
    })
    console.log(11,list)
     tableData.value = list
     total.value = res.data.total
  })
  .finally(() => {
     tableLoading.value = false
  })
}

getList()
const allClassList = ref([])
// 获取所有商品分类
const getAllList = () => {
  const data  = {
    current: 1,
    size: 999,
     type:'1',// 1-商品分类
  }
  getClassifytree(data)
  .then(res => {
    allClassList.value = res.data.records
  })
  .finally(() => {
     tableLoading.value = false
  })
}
/** 搜索按钮操作 */
const handleQuery = (val) => {
 queryParams.value = val
 getList()
}
/** 打开新增弹窗 */
const handleAdd = () => {
  dialogTitle.value = '添加分类'
  // 重置表单数据
  formData.value = {
    classifyName: '',
    level: 1,
    parentId:'',
    img:''
  }
  showDialog.value = true
  getAllList()
}

/** 打开编辑弹窗 */
const handleEdit = (row) => {
dialogTitle.value = '编辑分类'
 // 重置表单数据
 formData.value = {
   id: row.id,
   classifyName:row.classifyName,
    level: row.level,
    parentId:row.parentId,
    img:row.img
 }
 showDialog.value = true
 getAllList()
}
/** 删除按钮操作 */
function handleDelete(row) {
 proxy.$modal.confirm('是否确认删除此数据？').then(function() {
  saveTemplate({id: row.id, delFlag: -1}).then(() => {
     getList()
     proxy.$modal.msgSuccess("删除成功")
   })
 })
}
const handlePagination = (val) => {
 pageParams.value = val
 getList()
}
const handleSubmit = async () => {
 loading.value = true
 try {
  refForm.value.validate(valid => {
    if (!valid) return
    let params = {
      ...formData.value,
      type:'1',
    }
    console.log(11,params)
    saveClassify(params).then(res=>{
      showDialog.value = false
      proxy.$modal.msgSuccess("保存成功")
      getList()
    })
   
  })
   
 } finally {
   loading.value = false
 }
}
</script>

<style lang="scss" scoped>
.classifyName_box{
  display: flex;
  align-items: center;
  .classifyName_img{
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-left: 8px;
  }
  span{

  }
}
.app-role {
 padding: 8px
}
</style>